<template>
	<view class="wrap">
		<top-bar fixed="relative"></top-bar>
		<view class="top">
			<view class="item">
				<view class="left">联系人</view>
				<input type="text" v-model="username" placeholder-class="line" placeholder="请输入联系人" />
			</view>
			<view class="item">
				<view class="left">手机号码</view>
				<input type="text" v-model="tel" maxlength="11" placeholder-class="line" placeholder="请输入手机号" />
			</view>
			<view class="item " v-if="addressId != '-1'">
				<view class="left">所在地区</view>
				<pickerAddress @change="change" class="text-left" style="width:80%">
					<text v-if="areaName">{{areaName }}</text>
					<text v-else class="placeholder">请选择所在地区</text>
				</pickerAddress>
				<text class='cuIcon-right'></text>
			</view>
			<!--<view class="item">
				<view class="left">邮政编码</view>
				<input type="text" v-model="postalCode" placeholder-class="line" placeholder="请输入邮政编码" />
			</view>-->
			<!-- <view class="item street">
				<view class="left">所在街道</view>
				<picker bindchange="PickerChange" :value="streetIndex" :range="streetScopes" :range-key="'areaName'" @change="streetChange">
					<view class="picker">
						{{streetScopes.length==0 ? "请选择街道" :streetScopes[streetIndex].areaName}}
					</view>
				</picker>
			</view> -->
			<view class="item address">
				<view class="left">详细地址</view>
				<textarea type="text" v-model="address" placeholder-class="line" placeholder="详细地址" />
			</view>
		</view>
		<view class="bottom">
			<view class="default">
				<view class="left">
					<view class="set">设置默认地址</view>
					<view class="tips">提醒：每次下单会默认推荐该地址</view>
				</view>
				<view class="right">
					<u-switch v-model="checked" active-color="red" inactive-color="#eee" @change="onSwitch"></u-switch>
				</view>
			</view>
		</view>
		<view class="operAddress">
			<view class="item minus" @tap="deleteAddress">
				<u-icon name="minus" class="icon" :size="30"></u-icon>删除地址
			</view>
			<view class="item add" @tap="editAddress">
				<u-icon name="plus" class="icon" :size="30"></u-icon>保存地址
			</view>
		</view>
		<view class="saveAddress" v-show="false">
			<view class="add" @tap="editAddress">
				<u-icon name="plus" class="icon" :size="30"></u-icon>保存地址
			</view>
		</view>
	</view>
</template>

<script>
	import pickerAddress from '../../components/pickerAddress/pickerAddress.vue'
	import provinces from 'uview-ui/libs/util/province.js';
	import citys from 'uview-ui/libs/util/city.js';
	import areas from 'uview-ui/libs/util/area.js';
	import topBar from "@/components/top-bar/top-bar.vue";
	import {
		saveUpdateUserAddress,
		getUserAddress,
		deleteUserAddress
	} from '../../api/user/userApi.js'
	import {
		getStreets
	} from '../../api/community/communityApi.js'



	export default {
		components: {
			pickerAddress,
			topBar
		},
		data() {
			return {
				showRegion: false,
				addressId: 0,
				userId: '',
				username: '',
				tel: '',
				areaCode: '330324',
				defaultAreaCode: [],
				address: '',
				isDefault: 'F',
				checked: false,
				areaName: '浙江省温州市永嘉县',
				province: '',
				city: '',
				area: '',
				street: '',
				postalCode: '325000',
				streetIndex: 0,
				streetScopes: [],
			};
		},
		computed: {

		},
		async onLoad(options) {
			await this.vc.onLoad(options);
			let that = this;
			let addressId = options.addressId;
			if (addressId != '-1' && !this.vc.isEmpty(addressId)) {
				return that.getAddressInfo(addressId);
			}
		},
		methods: {
			onSwitch() {
				if (this.isDefault == 'T') {
					this.isDefault = 'F'
					this.checked = false
				} else {
					this.isDefault = 'T'
					this.checked = true
				}
			},
			showRegionPicker() {
				this.showRegion = true
			},
			change: function(data) {
				let _that = this;
				_that.areaName = '';
				data.data.forEach(function(_obj) {
					_that.areaName += _obj.name;
				});
				_that.areaCode = data.data[2].code;
			},

			// 编辑添加地址
			editAddress: function() {
				let that = this;
				let data = {
					addressId: that.addressId == 0 ? '-1' : that.addressId,
					userId: that.vc.getCurrentUser().userId,
					areaCode: that.areaCode,
					username: that.username,
					tel: that.tel,
					address: that.address,
					province: that.province,
					city: that.city,
					area: that.area,
					street: that.street,
					isDefault: that.isDefault,
					postalCode: that.postalCode,
				};
				if( !that.tel || that.tel.length!==11) {
					return uni.showToast({
						title: '请输入11位手机号码'
					})
				}
				saveUpdateUserAddress(data)
					.then((data) => {
						uni.navigateBack({
							delta: 1
						})
					}, (error) => {
						uni.showToast({
							icon: 'none',
							title: error
						});
					})

			},
			// 地址信息
			getAddressInfo(addressId) {
				let that = this;
				let param = {
					page: 1,
					row: 1,
					addressId: addressId,
					userId: that.vc.getCurrentUser().userId
				}
				getUserAddress(param).then(_data => {
					let _address = _data.data[0]
					that.addressId = _address.addressId;
					that.userId = _address.userId;
					that.username = _address.username;
					that.tel = _address.tel;
					that.areaCode = _address.areaCode;
					that.areaName = _address.areaName;
					that.province = _address.province;
					that.city = _address.city;
					that.area = _address.area;
					that.street = _address.street;
					//that.getStreetsList();
					that.address = _address.address;
					that.isDefault = _address.isDefault;
					that.postalCode = _address.postalCode;
					let _defaultAreaCode = [that.areaCode.slice(0, 2), that.areaCode.slice(0, 4), that.areaCode]
					that.defaultAreaCode = _defaultAreaCode;
					// provinces.map((v, k) => {
					// 	if (useCode ? v.value == tmp : v.label == tmp) {
					// 		tmp = k;
					// 	}
					// });
					let defaultAreaCode = [that.areaCode.slice(0, 2), that.areaCode.slice(0, 4), that.areaCode]
					that.defaultAreaCode = defaultAreaCode
				})
			},
			// 删除收货地址
			deleteAddress() {
				deleteUserAddress({
					addressId: this.addressId,
					userId: this.userId
				}).then(res => {
					if (res.code === 0) {
						uni.showToast({
							title: '删除成功',
							icon: 'none',
							success: () => {
								uni.navigateBack({
									delta: 1
								});
							}
						});
					}
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	/deep/ .line {
		color: $u-light-color;
		font-size: 28rpx;
	}

	.placeholder {
		margin-left: 20upx;
		    overflow: hidden;
		    text-overflow: clip;
		    white-space: pre;
		    word-break: keep-all;
		    pointer-events: none;
		    line-height: inherit;
			color: #c0c4cc;
			font-size: 28upx;
	}

	.wrap {
		background-color: #f2f2f2;

		.top {
			background-color: #ffffff;
			border-top: solid 2rpx $u-border-color;
			padding: 22rpx;

			.item {
				display: flex;
				font-size: 32rpx;
				line-height: 100rpx;
				align-items: center;
				border-bottom: solid 2rpx $u-border-color;

				.left {
					width: 180rpx;
				}

				input {
					text-align: left;
				}
			}

			.address {
				padding: 20rpx 0;

				textarea {
					// width: 100%;
					height: 150rpx;
					background-color: #f7f7f7;
					line-height: 60rpx;
					margin: 40rpx auto;
					padding: 20rpx;
				}
			}

			.site-clipboard {
				padding-right: 40rpx;

				textarea {
					// width: 100%;
					height: 150rpx;
					background-color: #f7f7f7;
					line-height: 60rpx;
					margin: 40rpx auto;
					padding: 20rpx;
				}

				.clipboard {
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 26rpx;
					color: $u-tips-color;
					height: 80rpx;

					.icon {
						margin-top: 6rpx;
						margin-left: 10rpx;
					}
				}
			}
		}

		.bottom {
			margin-top: 20rpx;
			padding: 40rpx;
			padding-right: 0;
			background-color: #ffffff;
			font-size: 28rpx;

			.default {
				display: flex;
				justify-content: space-between;
				border-bottom: solid 2rpx $u-border-color;
				line-height: 64rpx;

				.tips {
					font-size: 24rpx;
				}

				.right {
					margin-right: 40rpx;
				}
			}
		}
	}

	.operAddress {
		display: flex;
		justify-content: space-around;
		width: 600rpx;
		line-height: 100rpx;
		position: absolute;
		bottom: 30rpx;
		left: 80rpx;
		font-size: 30rpx;

		.item {
			display: flex;
			align-items: center;
			color: #ffffff;
			border-radius: 60rpx;
			width: 280rpx;
			padding: 0 50rpx;

			.icon {
				margin-right: 10rpx;
			}
		}

		.minus {
			background-color: $u-type-info-disabled;
		}

		.add {
			background-color: $u-type-error;
		}

	}

	.saveAddress {
		display: flex;
		justify-content: space-around;
		width: 600rpx;
		line-height: 100rpx;
		position: absolute;
		bottom: 30rpx;
		left: 80rpx;
		background-color: red;
		border-radius: 60rpx;
		font-size: 30rpx;

		.add {
			display: flex;
			align-items: center;
			color: #ffffff;

			.icon {
				margin-right: 10rpx;
			}
		}
	}
</style>